<template>
    <div class="search">
        <nav class="searchList-nav" ref="change">
            <span
                :class="{ isActive: toggle === 'Articles' }"
                @click="handleChangeView('Articles')"
            >
                文章
            </span>
            <span
                :class="{ isActive: toggle === 'ArticleLists' }"
                @click="handleChangeView('ArticleLists')"
            >
                作者
            </span>
        </nav>
        <!-- <component :is="currentView"></component> -->
        <div>
            <content-list :contentList="articleDatas"></content-list>
            <div class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    layout="total,prev,pager,next"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="articleDatas.length"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import searchArticles from "../components/search/SearchArticles";
import searchArticleLists from "../components/search/SearchArticleLists";
import ContentList from "../components/ContentList";
import { getAllArticle } from "../api/index";

export default {
    name: "search",
    components: {
        searchArticles,
        searchArticleLists,
        ContentList,
    },
    created() {
        this.keywords = this.$route.query.keywords;
        this.getArticleList(this.keywords);
    },
    data() {
        return {
            toggle: "Articles",
            currentView: "searchArticles",
            articleDatas: [],
            keywords: "",
            pageSize: 10, // 页面大小，一页有15条数据
            currentPage: 1, // 当前页，默认第一页
        };
    },
    methods: {
        // 切换组件
        handleChangeView(component) {
            this.currentView = "search" + component;
            this.toggle = component;
            this.getArticleList();
        },
        async getArticleList(key) {
            const res = await getAllArticle({ keywords: this.keywords });
            console.log(res);
            this.articleDatas = res.data;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
    },
};
</script>
<style lang="scss" scoped>
@use "../assets/css/search.scss";
</style>
